<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pl15 pr15">
					<view class="area_block_1 pt25 pb25 pl20 pr20">
						<view class="ml15 fs30 cor_000">配件名称</view>
						<view class="mt20"><input type="text" class="ipt_01" v-model="name" placeholder="请输入配件名称"
								placeholder-style="color: #B2B2B2;"></view>
					</view>

					<!-- <view class="mt15 area_block_1 pt15 pb15 pl20 pr20">
            <view class="flex_box aic">
              <view class="ml15 fs30 cor_000">配件类型</view>
              <view class="item">
                <view class="sel_area_sty">
                  <picker class="" @change="bindPickerChange" :value="index" :range="array">
                    <text class="fs28" :class="{ cor_B2B : ColorOne }">{{array[index]}}</text>
                  </picker>
                </view>
              </view>
              <image src="/static/icon_arrow_6.png" class="ml20 img15"></image>           </view>
          </view> -->


					<view class="mt15 area_block_1 pt15 pb15 pl20 pr20">
						<view class="flex_box aic">
							<view class="ml15 fs30 cor_000">配件品牌</view>
							<view class="item">
								<view class="sel_area_sty">
									<picker class="" @change="bindPickerChangeTwo" :value="indexTwo" :range="brands">
										<text class="fs28" :class="{ cor_B2B : ColorTwo }">{{brands[indexTwo]}}</text>
									</picker>
								</view>
							</view>
							<image :lazy-load="true" src="/static/icon_arrow_6.png" class="ml20 img15"></image>
						</view>
					</view>

					<view class="mt15 area_block_1 pt25 pb25 pl20 pr20">
						<view class="ml15 fs30 cor_000">配件型号</view>
						<view class="mt20"><input type="text" class="ipt_01" v-model="model" placeholder="请填写配件型号"
								placeholder-style="color: #B2B2B2;"></view>
					</view>

					<view class="mt20">
						<view class="ml15 fs30 cor_000">配件规格</view>
						<view class="mt20"><input type="text" class="ipt_01" v-model="standard" placeholder="请填写配件规格"
								placeholder-style="color: #B2B2B2;"></view>
					</view>
					<view class="mt20">
						<view class="ml15 fs30 cor_000">厂家</view>
						<view class="mt20"><input type="text" class="ipt_01" v-model="factory" placeholder="请填写厂家名称"
								placeholder-style="color: #B2B2B2;"></view>
					</view>
					<view class="mt20">
						<view class="ml15 fs30 cor_000">产地</view>
						<view class="mt20"><input type="text" class="ipt_01" v-model="place" placeholder="请填写产地名称"
								placeholder-style="color: #B2B2B2;"></view>
					</view>
				</view>

				<view class="mt15 area_block_1 pt25 pb25 pl20 pr20">
					<view class="flex_box aic">
						<view class="ml15 fs30 cor_000">价格</view>
						<view class="item"><input type="number" pattern="[0-9]*" class="ipt_02" v-model="price"
								placeholder="请输入" placeholder-style="color: #B2B2B2;"></view>
						<view class="ml35 fs28 cor_000">元</view>
					</view>
				</view>

				<view class="mt15 area_block_1 pt25 pb25 pl20 pr20">
					<view class="ml15 fs30 cor_000">配件图片</view>
					<view class="mt35 df fw">
						<view v-for="(item, k) in imgList" :key="k" style="position: relative;">
							<image :lazy-load="true" :src="item" class="mr17 mb10 img16"></image>
							<image :lazy-load="true" src="../../static/del.png"
								style="width: 40rpx;height: 40rpx;position: absolute;top: 0;right: 0;transform: translate(50%, -50%);"
								@tap="delImg(k)"></image>
						</view>

						<image :lazy-load="true" src="/static/icon_file_img.png" class="mb10 img16" @tap="uploadFile()"></image>
					</view>
				</view>

			</view>
			</image> <!-- 上架-按钮 -->
			<view class="consult_immediately_btn" v-if="(type == 'add')" @tap="uploadComponent">上架</view>
			<view class="consult_immediately_btn" v-if="(type != 'add')" @tap="updatePageData">保存</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getCompInfoApi,
		uploadImgApi,
		updateComponentApi,
		getBrandsApi,
		uploadComponentApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				array: ['请选择配件类型', '类型1', '类型2'],
				index: 0,
				ColorOne: true,
				arrayTwo: ['请选择配件品牌', '品牌1', '品牌2'],
				indexTwo: 1,
				ColorTwo: true,
				id: 0,
				store_id: 0,
				brandId: 1,
				detail: '',
				name: '',
				model: '',
				standard: '',
				factory: '',
				place: '',
				price: '',
				imgList: [],
				brands: [],
				brandsArray: [],
				type: ''
			}
		},
		onLoad(options) {
			console.log(options)
			this.store_id = options.store_id;
			this.id = options.id;
			this.type = options.type;
			console.log(this.type)
			if (this.type != 'add') {
				this.loadDetailData();
			}
			
			this.loadBrandsData();
		},
		methods: {
			loadDetailData() {
				let that = this;
				showLoading();
				getCompInfoApi({
					id: this.id
				}).then(res => {
					console.log(res)
					that.detail = res.data;
					that.name = res.data.name;
					that.model = res.data.model;
					that.standard = res.data.standard;
					that.factory = res.data.factory;
					that.place = res.data.place;
					that.price = res.data.price;
					that.imgList = res.data.imgList == undefined ? [] : res.data.imgList;
					that.brandId = res.data.brandId;

					hideLoading();
				}).catch(err => {
					console.log(err);
					hideLoading();
				})
			},
			loadBrandsData() {
				let that = this;
				showLoading();
				getBrandsApi({}).then(res => {
					for (let i in res.data) {
						if (res.data[i].id == that.brandId) {
							that.indexTwo = i;
						}
					}
					that.brandsArray = res.data;
					var data = res.data;
					data.forEach(function(item) {
						that.brands.push(item.name);
					})


					hideLoading();
				}).catch(err => {
					console.log(err);
					hideLoading();
				})
			},
			updatePageData() {

				let that = this;
				if (!this.name) {
					toast('请输入配件名称');
					return false;
				}
				if (!this.model) {
					toast('请输入配件型号');
					return false;
				}
				if (!this.standard) {
					toast('请输入配件规格');
					return false;
				}
				if (!this.factory) {
					toast('请输入厂家');
					return false;
				}
				if (!this.place) {
					toast('请输入产地');
					return false;
				}
				if (!this.price) {
					toast('请输入价格');
					return false;
				}
				console.log(this.imgList)
				if (!this.imgList) {
					toast('请上传配件照片');
					return false;
				}
				showLoading('提交中');
				updateComponentApi({
					// userId: uni.getStorageSync('userId'),
					id: that.id,
					storeId: that.store_id,
					name: that.name,
					brandId: that.brandId,
					price: that.price,
					model: that.model,
					standard: that.standard,
					factory: that.factory,
					place: that.place,
					imgList: JSON.stringify(that.imgList)
				}).then(res => {
					toast('信息更新成功！');
					hideLoading();
					let url = '/pages/shop_preview/shop_preview?id=' + that.store_id + '&type=storeId';
					
					setTimeout(function() {
						console.log(url,'url');
						uni.redirectTo({
							url: url
						})
					},1500)
				}).catch(err => {
					hideLoading();
				})
			},
			uploadFile() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						showLoading('上传中');
						uploadImgApi({
							file: res.tempFilePaths[0],
							id: 5
						}).then(res => {
							// _img.push(res.data);

							that.imgList.push(res.data);
							console.log(that.imgList)
							hideLoading();
						}).catch(err => {
							hideLoading();
						})
					}
				});
			},
			delImg(index) {
				console.log(index);
				console.log('aaaaaaa');
				console.log(this.imgList);

				this.imgList.splice(index, 1);
				console.log(this.imgList);

			},

			uploadComponent() {
				let that = this;
				if (!this.name) {
					toast('请输入配件名称');
					return false;
				}
				if (!this.model) {
					toast('请输入配件型号');
					return false;
				}
				if (!this.standard) {
					toast('请输入配件规格');
					return false;
				}
				if (!this.factory) {
					toast('请输入厂家');
					return false;
				}
				if (!this.place) {
					toast('请输入产地');
					return false;
				}
				if (!this.price) {
					toast('请输入价格');
					return false;
				}
				console.log(this.imgList)
				if (!this.imgList) {
					toast('请上传配件照片');
					return false;
				}
				showLoading('提交中');
				uploadComponentApi({
					// userId: uni.getStorageSync('userId'),
					//storeId: that.id,
					storeId: that.store_id,
					name: that.name,
					brandId: that.indexTwo,
					price: that.price,
					model: that.model,
					standard: that.standard,
					factory: that.factory,
					place: that.place,
					imgList: JSON.stringify(that.imgList)
				}).then(res => {
					toast('信息提交成功！');
					hideLoading();
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}).catch(err => {
					hideLoading();
				})
			},

			bindPickerChange: function(e) { //请选择配件类型
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorOne = false
				} else {
					this.ColorOne = true
				}
				this.index = e.target.value
			},
			bindPickerChangeTwo: function(e) { //请选择配件品牌
				console.log('picker1发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorTwo = false
				} else {
					this.ColorTwo = true
				}
				this.indexTwo = e.target.value;
				this.brandId = this.brandsArray[e.target.value].id;

			},
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.ipt_01,
	.ipt_02 {
		display: inline-block;
		width: 100%;
		padding: 0 15rpx;
		height: 70rpx;
		line-height: 68rpx;
		text-align: left;
		font-size: 28rpx;
		color: #000;
		background-color: #fff;
		border: 1px solid #e7e5e5;
		border-radius: 0;
		outline: none;
	}

	.ipt_02 {
		padding: 0;
		text-align: right;
		line-height: 70rpx;
		border: none;
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: right;
		font-size: 28rpx;
		color: #000;
		background: transparent;
	}
</style>
